/**
 * 解析歌词字符串
 * 得到一个歌词对象的数组
 * 每个歌词对象：
 * {time:开始时间,words:歌词内容}
 */
function parseLrc() {
    let lines = lrc.split('\n')
    let result = [];
    for(let i=0; i<lines.length; i++) {
        let str = lines[i];
        let parts = str.split(']');
        let timeStr = parts[0].substring(1);
        let obj = {
            time: parseTime(timeStr),
            words: parts[1]
        };
        result.push(obj);
    }
    return result;
}

/**
 * 将一个时间字符串解析为数字（秒)
 * @param {String} timeStr 时间字符串
 * @returns 
 */
function parseTime(timeStr) {
    let parts = timeStr.split(':');
    return +parts[0] * 60 + +parts[1];
}

let lrcData = parseLrc();

// 获取需要的dom
let doms = {
    audio: document.querySelector('audio'),
    ul: document.querySelector('ul'),
    container: document.querySelector('.container'),
};

/**
 * 计算出在当前播放器播放第几秒的情况下
 * lrcData数组中，应该高亮显示的歌词下标
 * 如果没有任何一句歌词要显示，则返回 -1
 */
function findIndex() {
    // 播放器的当前时间
    let curTime = doms.audio.currentTime;
    for(let i=0; i<lrcData.length; i++) {
        if(curTime < lrcData[i].time) {
            return i - 1;
        }
    }
    // 找遍了都没找到（说明播放到最后一句了）
    return lrcData.length - 1;
}

// 界面

/**
 * 创建歌词元素  li
 */
function createLrcElement() {
    // 创建一个文档片段
    let frag = document.createDocumentFragment();
    for(let i=0; i<lrcData.length; i++) {
        var li = document.createElement('li');
        li.textContent = lrcData[i].words;
        frag.appendChild(li);  // 改动 dom 树
    }
    doms.ul.appendChild(frag);
};

createLrcElement();

// 容器高度
let containerHright = doms.container.clientHeight;
// 每个li元素的高度
let liHeight = doms.ul.children[0].clientHeight;
// ul的最大偏移量
let maxOffset = doms.ul.clientHeight - containerHright;

/**
 * 设置ul的偏移量
 */
function setOffset() {
    let index = findIndex();
    let offset = liHeight * index + liHeight / 2 - containerHright / 2;
    if(offset < 0) {
        offset = 0;
    }
    if(offset > maxOffset) {
        offset = maxOffset;
    }
    doms.ul.style.transform = `translateY(-${offset}px)`;
    // 去掉之前的active样式
    let li = doms.ul.querySelector('.active')
    if(li) {
        li.classList.remove('active')
    }

    li = doms.ul.children[index]
    if(li) {
        li.classList.add('active');
    }
}

doms.audio.addEventListener('timeupdate', setOffset)